<template lang="html">
  <div class="global">
    <swiper class="swiper-container" v-if="meetingRoom.meeting_images.length != 0" indicator-dots=true autoplay=true interval=4000 duration=500>
      <block v-for="item in meetingRoom.meeting_images" :key="index">
        <swiper-item>
          <image class="slide-image" :src="item"></image>
        </swiper-item>
      </block>
    </swiper>
    <div class="swiper-container" v-else>
      <image  class="slide-image" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180628/2018062804433187821.jpg"></image>
    </div>
    <div class="info">
      <div class="top">
        <div class="left">
          <div class="left-top">
            <image src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180519/2018051902251751125.jpg"></image>
            <span>{{meetingRoom.meeting_name}}</span>
          </div>
          <span class="left-bottom">{{meetingRoom.address}}</span>
        </div>
        <div class="right">
          <image @click="call" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180605/2018060502540656185.jpg"></image>
        </div>
      </div>
      <div class="bottom">
        <span class="left">{{meetingRoom.meeting_people}}人场地</span>
        <span>￥{{meetingRoom.rent_hour}}/h</span>
      </div>
    </div>
    <div class="booking">
      <div class="top">
        <span @click="activeDate(1)" :class="todayActive ? 'active' : 'date'">今天 ({{today}})</span>
        <span @click="activeDate(2)" :class="tomorrowActive ? 'active' : 'date'">明天 ({{tomorrow}})</span>
        <picker :class="dateActive ? 'date-active' : 'picker'" mode="date" value="date" :start="picker_start_date" end="2025-12-30" @change="dateChange">{{date}}</picker>
      </div>
      <scroll-view class="middle" scroll-x>
        <span class="time" :class="{'time-active': item.timeActive, 'disable': item.disable}" @click="chooseTime(index)" v-for="(item, index) in timeList" :key="index">{{item.time}}</span>
      </scroll-view>
      <div class="bottom">
        <div class="section">
          <div class="period">
            <image class="icon-clock" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180609/2018060902434035813.jpg"></image>
            <span>{{startTime}}-{{endTime}}</span>
          </div>
          <span>{{hours}}小时</span>
        </div>
        <div class="section">
          <span>单价:</span>
          <div>
            <span v-show="showOriginal" class="original">￥{{meetingRoom.rent_hour}}/h</span>
            <span class="price">￥{{price}}/h</span>
          </div>
        </div>
        <div class="section">
          <span class="left">总价:</span>
          <span class="right">￥{{amount}}</span>
        </div>
      </div>
      <div class="btn" @click="toBooking">预定</div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import store from '@/store/store'
export default {
  data () {
    return {
      picker_start_date: '',
      today: '',
      today_temp: '',
      tomorrow: '',
      tomorrow_temp: '',
      date: '选择日期',
      date_temp: '',
      bookingDate: '',
      chosenDate: '',
      todayActive: true,
      tomorrowActive: false,
      dateActive: false,
      meetingRoom: {},
      timeList: [{timeActive: false, disable: false, time: '09:00-10:00'}, {timeActive: false, disable: false, time: '10:00-11:00'}, {timeActive: false, disable: false, time: '11:00-12:00'}, {timeActive: false, disable: false, time: '13:00-14:00'}, {timeActive: false, disable: false, time: '14:00-15:00'}, {timeActive: false, disable: false, time: '16:00-17:00'}, {timeActive: false, disable: false, time: '17:00-18:00'}, {timeActive: false, disable: false, time: '18:00-19:00'}, {timeActive: false, disable: false, time: '20:00-21:00'}, {timeActive: false, disable: false, time: '22:00-23:00'}, {timeActive: false, disable: false, time: '23:00-24:00'}],
      list: [],
      startTime: '00:00',
      endTime: '00:00',
      hours: 0,
      roomIndex: 0,
      price: 0,
      amount: 0,
      showOriginal: false,
      rentingList: [],
      rentingHours: 0
    }
  },
  onShow () {
    console.log(this.landlordPhone)
    this.startTime = '00:00'
    this.endTime = '00:00'
    var _today = new Date()
    this.today_temp = _today.getFullYear() + '-' + ((_today.getMonth() + 1) >= 10 ? (_today.getMonth() + 1) : '0' + (_today.getMonth() + 1)) + '-' + (_today.getDate() >= 10 ? _today.getDate() : '0' + _today.getDate())
    this.today = ((_today.getMonth() + 1) >= 10 ? (_today.getMonth() + 1) : '0' + (_today.getMonth() + 1)) + '/' + (_today.getDate() >= 10 ? _today.getDate() : '0' + _today.getDate())
    var _tomorrow = new Date(new Date(_today).getTime() + 1000 * 60 * 60 * 24)
    this.tomorrow_temp = _tomorrow.getFullYear() + '-' + ((_tomorrow.getMonth() + 1) >= 10 ? (_tomorrow.getMonth() + 1) : '0' + (_tomorrow.getMonth() + 1)) + '-' + (_tomorrow.getDate() >= 10 ? _tomorrow.getDate() : '0' + _tomorrow.getDate())
    this.tomorrow = ((_tomorrow.getMonth() + 1) >= 10 ? (_tomorrow.getMonth() + 1) : '0' + (_tomorrow.getMonth() + 1)) + '/' + (_tomorrow.getDate() >= 10 ? _tomorrow.getDate() : '0' + _tomorrow.getDate())
    this.initTime()
    this.picker_start_date = this.today_temp
    this.bookingDate = this.today_temp
    this.roomIndex = parseInt(this.$root.$mp.query.index)
    this.opmeetingroomlist(this.roomIndex)
  },
  methods: {
    initTime () {
      this.rentingHours = 0
      this.hours = 0
      this.rentingList = []
      this.timeList = [{timeActive: false, disable: false, time: '09:00-10:00'}, {timeActive: false, disable: false, time: '10:00-11:00'}, {timeActive: false, disable: false, time: '11:00-12:00'}, {timeActive: false, disable: false, time: '13:00-14:00'}, {timeActive: false, disable: false, time: '14:00-15:00'}, {timeActive: false, disable: false, time: '16:00-17:00'}, {timeActive: false, disable: false, time: '18:00-19:00'}, {timeActive: false, disable: false, time: '20:00-21:00'}, {timeActive: false, disable: false, time: '22:00-23:00'}, {timeActive: false, disable: false, time: '23:00-24:00'}]
      this.list = []
    },
    // 选择日期
    dateChange (e) {
      this.date = e.mp.detail.value
      this.bookingDate = this.date
      this.dateActive = true
      this.todayActive = false
      this.tomorrowActive = false
      this.initTime()
      this.opmeetingrenttimebyday(this.meetingRoom.meeting_id, this.date)
    },
    call () {
      wx.makePhoneCall({
        phoneNumber: this.meetingRoom.contact
      })
    },
    toBooking () {
      var bookingTime = this.bookingDate + ' ' + this.startTime + '-' + this.endTime
      store.commit('setBookingTime', bookingTime)
      this.$router.push({ path: '/pages/meeting/meeting_booking/main', query: { index: this.roomIndex, price: this.price, hours: this.hours, amount: this.amount } })
    },
    activeDate (index) {
      this.date = '选择日期'
      this.dateActive = false
      if (index === 1) {
        this.bookingDate = this.today_temp
        this.todayActive = true
        this.tomorrowActive = false
        this.chosenDate = this.today
        this.initTime()
        this.opmeetingrenttimebyday(this.meetingRoom.meeting_id, this.today_temp)
      } else {
        this.bookingDate = this.tomorrow_temp
        this.todayActive = false
        this.tomorrowActive = true
        this.chosenDate = this.tomorrow
        this.initTime()
        this.opmeetingrenttimebyday(this.meetingRoom.meeting_id, this.tomorrow_temp)
      }
    },
    // 冒泡排序
    bubbleSort (arr) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            var temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
          }
        }
      }
      return arr
    },
    // 按值删除数组元素
    removeByValue (list, value) {
      for (var i = 0; i < list.length; i++) {
        if (list[i] === value) {
          list.splice(i, 1)
        }
      }
      return list
    },
    isArrayValue (list, val) {
      for (var i = 0; i < list.length; i++) {
        if (list[i] === val) {
          return true
        }
      }
      return false
    },
    activeTime (index) {
      // list没有值
      if (this.list.length === 0) {
        this.list.push(index)
        this.timeList[index].timeActive = true
      // list有值
      } else {
        // index在list里面
        if (this.isArrayValue(this.list, index)) {
          this.list = []
          this.list.push(index)
          for (var i = 0; i < this.timeList.length; i++) {
            this.timeList[i].timeActive = false
          }
          this.timeList[index].timeActive = true
        // index不在list里面
        } else {
          if (index > this.list[0] && index < this.list[this.list.length - 1]) {
            this.list = []
            this.list.push(index)
            for (var j = 0; j < this.timeList.length; j++) {
              this.timeList[j].timeActive = false
            }
            this.timeList[index].timeActive = true
          } else {
            this.list.push(index)
            this.bubbleSort(this.list)
            for (var k = this.list[0]; k <= this.list[this.list.length - 1]; k++) {
              this.timeList[k].timeActive = true
            }
          }
        }
      }
      this.startTime = this.timeList[this.list[0]].time.split('-')[0]
      this.endTime = this.timeList[this.list[this.list.length - 1]].time.split('-')[1]
      this.hours = this.list[this.list.length - 1] - this.list[0] + 1 - this.rentingHours
      if (this.hours >= 4 && this.hours <= 8 && this.meetingRoom.rent_halfday !== '') {
        this.showOriginal = true
        this.price = this.meetingRoom.rent_halfday
      } else if (this.hours >= 8 && this.meetingRoom.rent_fullday !== '') {
        this.showOriginal = true
        this.price = this.meetingRoom.rent_fullday
      } else {
        this.price = this.meetingRoom.rent_hour
      }
      this.amount = this.price * this.hours
    },
    // 选择时间段
    chooseTime (index) {
      if (!this.timeList[index].disable) {
        this.activeTime(index)
      } else {
        console.log('已出租')
      }
    },
    // 场地列表
    opmeetingroomlist (index) {
      var param = {}
      const opmeetingroomlist = api.opmeetingroomlist(param)
      opmeetingroomlist.then(d => {
        if (d.code === 200) {
          var meetingList = d.data.list
          this.meetingRoom = meetingList[index]
          this.price = this.meetingRoom.rent_hour
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    // 场地租用情况（接口有问题）
    opmeetingrenttimebyday (meetingId, date) {
      var param = {}
      param['meeting_id'] = meetingId
      param['date'] = date
      const opmeetingroomlist = api.opmeetingroomlist(param)
      opmeetingroomlist.then(d => {
        if (d.code === 200) {
          this.rentingList = d.data.list
          if (this.rentingList !== null) {
            for (var i = 0; i < this.rentingList.length; i++) {
              // var rentingDate = this.rentingList[i].start_time.split(' ', 1)[0]
              var rentingStartTime = this.rentingList[i].start_time.split(' ', 2)[1].split(':', 2)
              var rentingEndTime = this.rentingList[i].end_time.split(' ', 2)[1].split(':', 2)
              rentingStartTime = rentingStartTime[0] + ':' + rentingStartTime[1]
              rentingEndTime = rentingEndTime[0] + ':' + rentingEndTime[1]
              var start = 0
              var end = 0
              for (var j = 0; j < this.timeList.length; j++) {
                if (this.timeList[j].time.split('-', 2)[0] === rentingStartTime) {
                  start = j
                } else if (this.timeList[j].time.split('-', 2)[1] === rentingEndTime) {
                  end = j
                }
              }
              for (var k = start; k <= end; k++) {
                this.timeList[k].disable = true
                this.timeList[k].timeActive = false
              }
              for (var n = 0; n < this.timeList.length; n++) {
                if (this.timeList[n].disable) {
                  this.rentingHours++
                }
              }
            }
          }
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import "./meeting_detail.css";
</style>
